import React, { Component } from 'react';
import { Breadcrumb, Layout, Form, Input, Button,Message } from 'antd';
import { query } from '../../utils/utils';
const { Content } = Layout;
const layout = {
    labelCol: {
        span: 2,
    },
    wrapperCol: {
        span: 22,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 2,
        span: 22,
    },
};
class User extends Component {
constructor(props){
    super(props);
    this.state={
        form:React.createRef()
    }
}
onFinish(values){
    if(values.password.length<5){
        return Message.error('密码不能少于5个字符');
    }
    if(values.password!=values.password1){
        return Message.error('两次密码输入不一致!');
    }
    const {password}=values;
    query('/index.php?c=admin&a=reset_pwd','POST',{password}).then(res=>{
        if(res.errcode==0){
            // 重置表单
            this.state.form.current.resetFields();
            Message.success('密码重置成功');
        }else{
            Message.error('密码重置失败');
        }
    });
};

onFinishFailed(errorInfo){
    console.log('Failed:', errorInfo);
};
render() {
    return (
        <div>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>管理中心</Breadcrumb.Item>
                <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                <Breadcrumb.Item>密码重置</Breadcrumb.Item>
            </Breadcrumb>
            <Content
                className="site-layout-background"
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                }}
            >

                <Form
                    {...layout}
                    name="basic"
                    onFinish={this.onFinish.bind(this)}
                    onFinishFailed={this.onFinishFailed.bind(this)}
                    ref={this.state.form}
                >
                    <Form.Item
                        label="新密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password placeholder="请确认密码"/>
                    </Form.Item>

                    <Form.Item
                        label="确认密码"
                        name="password1"
                        rules={[
                            {
                                required: true,
                                message: '请确认密码!',
                            },
                        ]}
                    >
                        <Input.Password placeholder="请确认密码"/>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">确认修改</Button>
                    </Form.Item>
                </Form>
            </Content>
        </div>
    );
}
}

export default User;
